// 导入第三方组件：表格展开
import ElTreeGrid from 'element-tree-grid'
export default {
  // 将表格展示组件注册为局部组件
  components: {
    // 'el-table-tree-column': ElTreeGrid

    // 属性名表达式  ES6中的语法
    [ElTreeGrid.name]: ElTreeGrid
  },
  data () {
    return {
    // 分类列表数据
      cateList: [],
      // 总条数
      total: 0,
      // 当前页
      pagenum: 1,

      // 是否加载中
      isLoading: false,

      // 控制添加分类对话框的展示和隐藏
      isShowCateDialog: false,

      cateForm: {
        // 分类名称
        cat_name: '',
        // 存储选中项结合
        cat_pid_arr: []
      },
      // 添加分类时的列表数据
      cateAddList: []
    }
  },

  created () {
    this.getCateList()

    // 获取添加分类时的数据
    this.getCateAddList()
  },

  methods: {
    /**
       * 获取分类列表
       */
    async getCateList (pagenum = 1) {
    // 开启loading
      this.isLoading = true

      const res = await this.$http.get('/categories', {
        params: {
          type: 3,
          pagenum,
          pagesize: 5
        }
      })

      const { result, total, pagenum: curPage } = res.data.data
      this.cateList = result
      this.total = total
      this.pagenum = curPage + 1

      // 关闭loading
      this.isLoading = false
    },

    /**
       * 切换分页
       * @param {number} curPage 当前页
       */
    changePage (curPage) {
      this.getCateList(curPage)
    },
    /**
     * 打开添加分类对话框
     */
    showCateDialog () {
      // 展示对话框
      this.isShowCateDialog = true
    },
    /**
     * 获取添加分类需要的分类数据
     */
    async getCateAddList () {
      const res = await this.$http.get('/categories', {
        params: {
          type: 2
        }
      })

      this.cateAddList = res.data.data
    },
    /**
     * 添加分类
     */
    async addCate () {
      /* eslint-disable camelcase */
      const {cat_name, cat_pid_arr} = this.cateForm
      const res = await this.$http.post('/categories', {
        cat_name,
        cat_pid: cat_pid_arr[cat_pid_arr.length - 1],
        cat_level: cat_pid_arr.length
      })

      // 关闭对话框
      this.isShowCateDialog = false
      // 刷新数据
      this.getCateList()
      // 提示成功
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    }
  }
}
